<template>
    <div class="category">

        <!--        顶部导航栏-->
        <div class="navBar">

            <div class="navBar-border">

                <div class="navBar-inner">

                    <!--                    图标-->
                    <div class="navBar-icon" @click="goToBookHome">
                        <img src="/images/icon01.png" alt="">
                    </div>

                    <div>
                        <input placeholder="搜索" type="text" class="navBar-input">
                    </div>

                    <button class="navBar-home" @click="goToBookHome">
                        首页
                    </button>

                    <span class="navBar-separator">
                    </span>

                    <button class="navBar-link">
                        传书到手机
                    </button>

                    <span class="navBar-separator">
                    </span>

                    <button class="navBar-link">
                        墨水屏版本
                    </button>

                    <span class="navBar-separator">
                    </span>

                    <button class="navBar-link">
                        手机版
                    </button>

                    <span class="navBar-separator">
                    </span>

                    <div style="position: relative;">
                        <div class="navBar-avatar">
                            <img src="/images/96.jfif"
                                 alt="" style="border-radius: 50%;
    vertical-align: top;">
                        </div>
                    </div>

                </div>

            </div>
        </div>

        <!--        内容区-->
        <div class="content">

            <!--                        左侧导航栏-->
            <!-- 左侧导航栏 -->
            <div class="sidebar">
                <el-menu
                        class="sidebar-menu"
                        :default-active="activeIndex"
                        mode="vertical"
                        background-color="#fff"
                        text-color="#b2b4b8"
                >
                    <el-menu-item
                            v-for="(item, index) in menuItems"
                            :key="item.id"
                            :index="item.index"
                            :class="{'selected': activeIndex === item.index}"
                            @click="handleMenuClick(item)"
                    >
                        {{ item.name }}
                    </el-menu-item>
                </el-menu>

            </div>

            <!-- 右侧内容 -->
            <div class="container">
                <!-- 榜单表头 -->
                <div class="container-header">
                    <p class="header-title">
                        <span class="header-title-text">
                            {{ currentTitle }}
                        </span>
                    </p>
                </div>

                <!-- 卡片 -->
                <div class="bookList">
                    <div class="bookList-item">
                        <div v-for="(book, index) in categoryBooks" :key="index" class="item-container">
                            <p class="item-index">{{ index + 1 }}</p>
                            <div class="bookList-item-cover">
                                <img :src="book.cover" alt="">
                                <span class="borderDecor"></span>
                            </div>
                            <div class="bookList-item-info">
                                <p class="bookList-info-title">{{ book.title }}</p>
                                <p class="bookList-info-author">{{ book.author }}</p>
                                <p class="bookList-item-reading">
                                    <span class="readingCountText">
                                        <span class="reading-number">{{ book.readingCount }}</span> 人今日阅读
                                    </span>
                                    <span class="reading-dep"></span>
                                    <span class="readingText">推荐值</span>
                                    <span class="reading-percent">{{ book.recommendationRate }}%</span>
                                </p>
                                <p class="item-desc">{{ book.description }}</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>


        </div>

    </div>
</template>

<script>
    import axios from "axios";
    import '../mock/mock-category.js';

    export default {
        name: "category",
        data() {

            return {

                categoryBooks: [], // 卡片书籍数据

                activeIndex: "menu-1", // 当前选中的菜单项
                menuItems: [], // 存储菜单项数据

                currentTitle: "TOP50飙升榜", // 默认标题
            };
        },

        mounted() {

            const apiUrl = this.$route.query.apiUrl; // 获取传递的 apiUrl 参数
            console.log("接收到的apiUrl:", apiUrl); // 控制台打印传过来的 apiUrl

            if (apiUrl) {
                this.fetchCategoryBooks(apiUrl); // 根据传过来的 apiUrl 获取数据
                this.fetchMenuItems(); // 获取菜单项数据
            }

            // this.fetchCategoryBooks("/api/category-books"); // 页面加载完成后请求数据
            // this.fetchMenuItems(); // 获取菜单项数据
        },

        methods: {
            // 跳转主页
            goToBookHome() {
                this.$router.push('/');
            },


            // 获取推荐书籍数据
            fetchCategoryBooks(apiUrl) {
                console.log("传地址:", apiUrl);

                axios.get(apiUrl)
                    .then(response => {
                        if (response.data.code === 200) {
                            this.categoryBooks = response.data.data;
                        } else {
                            console.error('返回的数据格式不正确:', response.data);
                        }
                    })
                    .catch(error => {
                        console.error('获取书籍数据失败:', error);
                    });
            },

            // 获取菜单项数据
            fetchMenuItems() {
                axios.get('/api/menu-items')
                    .then(response => {
                        if (response.data.code === 200) {
                            this.menuItems = response.data.data;  // 获取菜单项数据
                            const selectedItem = this.menuItems.find(
                                (item) => item.apiUrl === this.$route.query.apiUrl
                            );

                            // if (this.menuItems.length > 0) {
                            //     this.fetchCategoryBooks(this.menuItems[0].apiUrl);
                            // }

                            if (selectedItem) {
                                this.activeIndex = selectedItem.index; // 更新菜单项的选中状态
                                this.currentTitle = selectedItem.name; // 更新页面标题
                            }
                        }
                    })
                    .catch(error => {
                        console.error('获取菜单项数据失败:', error);
                    });
            },

            handleMenuClick(item) {
                this.activeIndex = item.index;  // 更新当前选中的菜单项
                this.currentTitle = item.name;  // 更新当前显示的标题

                // 动态请求相应的书籍数据
                this.fetchCategoryBooks(item.apiUrl);
            },

        }

    }
</script>

<style scoped>

    .category {
        min-height: 100vh;
        margin: 0%;
        background-color: #ffffff;
        width: 100%;
        height: 100%;
    }

    .navBar {
        position: fixed;
        z-index: 80;
        width: 100%;
        height: 72px;
        transition: background-color .2s ease-in-out;
        background-color: #ffffff;
    }

    .navBar-border {
        border-radius: 0;
        border: solid #ebedf1;
        border-width: 0 0 1px;
        height: 100%;
    }

    .navBar-inner {
        max-width: 1120px;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        line-height: 1.5;
    }

    .navBar-icon {
        cursor: pointer;
    }

    .navBar-input {
        color: #c1c8d2;
        margin: 0 20px;
        flex: 1;
        height: 36px;
        padding: 0 36px;
        border-radius: 20px;
        font-size: 14px;
        background-size: 20px 20px;
        background: #f6f7f9 url(https://cdn.weread.qq.com/web/wrwebnjlogic/image/icon_search.5731b0d1.png) no-repeat 12px 8px;
        width: 480px;
        border: 0;

    }

    .navBar-home {
        color: #555a61;
        margin-left: 12px;
        font-size: 16px;
        font-weight: 500;
        opacity: .7;
        text-decoration: none;
    }

    .navBar-home:hover {
        font-weight: 700;
        color: #242e33;
    }

    .navBar-separator {
        background-color: #0d141e;
        display: inline-block;
        width: 1px;
        height: 16px;
        margin-left: 18px;
        opacity: .3;
    }

    .navBar-link {
        margin-left: 12px;
        font-size: 16px;
        font-weight: 500;
        opacity: .7;
        color: #555a61;
    }

    .navBar-link:hover {
        color: #242e33;
        font-weight: 700;
    }

    button {
        background: none;
        border: 0;
        padding: 0;
        text-decoration: none;
        cursor: pointer;
    }

    .navBar-avatar {
        cursor: pointer !important;
        width: 28px;
        height: 28px;
        margin-left: 18px;
        display: inline-block;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 50%;
        border: 1px solid rgba(0, 0, 0, .1);
    }

    img {
        height: 100%;
        width: 100%;
    }

    .content {
        padding-top: 72px;
        max-width: 1120px;
        margin-left: auto;
        margin-right: auto;
    }

    .sidebar {
        width: 160px;
        position: fixed;
        top: 72px;
        bottom: 0;
    }

    .sidebar-menu {
        height: 100%;
        width: 100%;
        border-radius: 0;
        border: solid #ebedf1;
        border-width: 0 1px 0 0;
        padding: 10px 0;
        overflow: auto;
    }

    /*滚动条隐藏*/
    /*.sidebar-menu::-webkit-scrollbar {*/
    /*  display: none;*/
    /*}*/

    .el-menu-item {
        display: flex; /* 使用 Flexbox 来布局 */
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 8px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        font-size: 16px;
        font-weight: 600;
        color: rgba(0, 0, 0, .6);
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
        /*padding-left: 30px;*/
        padding-top: 4px;
        height: 44px;
    }

    /*.el-menu-item:hover {*/
    /*    background-color: #f1f9ff;*/
    /*    color: #0d141e;*/
    /*}*/

    .el-menu-item:hover {
        color: #0d141e !important;
        background-color: #f1f9ff !important;
    }

    .sidebar-page {
        height: 100%;
        position: relative;
    }

    .sidebar-Border {
        border-radius: 0;
        border: solid #ebedf1;
        border-width: 0 1px 0 0;
        padding: 10px 0;
        height: 100%;
        width: 100%;
    }

    /* 确保选中时背景色变为 #2493ee */
    .el-menu-item.is-active {
        background-color: #2493ee !important; /* 强制设置背景色 */
        color: #fff !important; /* 设置选中时文字为白色 */
    }

    /* 让 hover 状态不覆盖选中状态 */
    .el-menu-item.is-active:hover {
        background-color: #2493ee !important;
    }

    .ranking-list {
        height: 100%;
        width: 100%;
        overflow: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .ranking-list-item {
        height: 44px;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 8px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .ranking-list-item:hover {
        background-color: #f1f9ff;
    }

    .ranking-list-item.selected {
        background-color: #2493ee;
        color: #fff; /* 选中时文字变为白色 */
    }

    .list-item-link {
        color: rgba(0, 0, 0, .6);
        padding: 12px 0 12px 10px;
        display: block;
        font-size: 16px;
        font-weight: 600;
        height: 44px;
        line-height: 24px;
        color: #b2b4b8;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
        word-wrap: normal;
    }

    .container {
        /*display: flex;*/
        /*flex-direction: row;*/
        /*position: relative;*/
        margin: 0 0 0 160px;
    }

    /*榜单表头*/
    .container-header {

    }

    .header-title {
        margin-left: 75px;
        padding-top: 6px;
        height: 35px;
    }

    .header-title-text {
        color: #212832;
        display: inline-block;
        vertical-align: middle;
        font-size: 24px;
        margin-right: 4px;
        font-family: "SourceHanSerifCN-Bold", PingFang SC, -apple-system, SF UI Text, Lucida Grande, STheiti, Microsoft YaHei, sans-serif;
        font-weight: 700;
    }


    .bookList {
        border-radius: 0;
        border: solid #ebedf1;
        border-width: 1px 0 0;
        padding: 20px 0;
    }

    .bookList-item {
        position: relative;
    }

    .item-container {
        display: flex;
        align-items: center;
        padding: 20px 0;
        overflow: hidden;
        cursor: pointer;
    }

    .item-container:hover {
        background-color: #f1f9ff;
    }

    .item-index {
        color: #5d646e;
        flex-shrink: 0;
        width: 76px;
        font-size: 20px;
        font-family: DIN-Medium, PingFang SC, -apple-system, SF UI Text, Lucida Grande, STheiti, Microsoft YaHei, sans-serif;
        text-align: center;
    }

    .bookList-item-cover {
        flex-shrink: 0;
        width: 108px !important;
        height: 156px !important;
        display: block;
        box-shadow: 0 2px 16px rgba(0, 0, 0, .08);
        background: #d8d8d8;
        position: relative;
    }

    .bookList-item-info {
        flex: 1;
        padding: 0 32px;
    }

    .bookList-info-title {
        color: #0d141e;
        padding-right: 90px;
        font-size: 18px;
        font-family: "SourceHanSerifCN-Bold", PingFang SC, -apple-system, SF UI Text, Lucida Grande, STheiti, Microsoft YaHei, sans-serif;
        line-height: 19px;
        overflow: hidden;
        display: -webkit-box;
        display: -moz-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-text-size-adjust: none;
        max-height: 52px;
    }

    .bookList-info-author {
        color: #5d646e;
        margin-top: 10px;
        font-size: 14px;
        line-height: 14px;
        overflow: hidden;
        display: -webkit-box;
        display: -moz-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-text-size-adjust: none;
        height: auto;
        max-height: 21px;
        position: relative;
        z-index: 2;
    }

    .bookList-item-reading {
        color: #858c96;
        display: flex;
        align-items: center;
        margin-top: 8px;
        font-family: DIN-Medium, PingFang SC, -apple-system, SF UI Text, Lucida Grande, STheiti, Microsoft YaHei, sans-serif;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
        word-wrap: normal;
    }

    .readingCountText {
        font-size: 14px;
    }

    .reading-number {
        margin-right: 3px;
        font-style: normal;
        font-size: 16px;
    }

    /*小隔线*/
    .reading-dep {
        background-color: #858c96;
        width: 1px;
        height: 12px;
        margin: 0 13px;
    }

    /*推荐值*/
    .readingText {
        font-size: 14px;
    }

    /*推荐值数值*/
    .reading-percent {
        font-style: normal;
        font-size: 15px;
    }

    /*简介*/
    .item-desc {
        color: #858c96;
        margin-top: 8px;
        font-size: 14px;
        line-height: 22px;
        overflow: hidden;
        height: 44px;
        display: -webkit-box;
        display: -moz-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-text-size-adjust: none;
        height: auto;
        max-height: 44px;
    }

</style>